<template>
    <div class="friendInfo">
        <!-- {{ee}} -->
        <van-nav-bar
                title="联系人详情"
                class="header"
                left-text=""
                left-arrow
                @click-left="backToAddress()">
            <template #right>
                <van-icon name="setting-o" size="18" v-show="editFlag" @click="changeEditFlag()"/>
                <van-icon name="passed" size="18" v-show="!editFlag" @click="changeEditFlag()"/>
            </template>
        </van-nav-bar>
        <div class="botbox">
            <van-form inset v-model="state" style="width:100%">
                <van-cell-group inset>
                    <van-field required clickable v-model="state.name" label="姓名" placeholder="请输入姓名" :disabled="editFlag"/>
                </van-cell-group>
                <van-cell-group inset>
                    <van-field v-model="state.id" maxlength="8" type="digit" label="北斗号" clickable required placeholder="输入北斗号" clearable disabled/>
                </van-cell-group>
                <!-- <van-cell-group inset>
                    <van-field label="用户职位">
                        <template #input>
                            <van-dropdown-menu active-color="#153744" style="width: 100%">
                                <van-dropdown-item v-model="state.duty" :value="state.duty" :options="dutyOption" :disabled="editFlag"/>
                            </van-dropdown-menu>
                        </template>
                    </van-field>
                </van-cell-group>

                <van-cell-group inset>
                    <van-field label="平台类型">
                        <template #input>
                            <van-dropdown-menu active-color="#153744"  style="width: 100%">
                                <van-dropdown-item v-model="state.platformtype" :value="state.platformtype" :options="platformOption" :disabled="editFlag"/>
                            </van-dropdown-menu>
                        </template>
                    </van-field>
                </van-cell-group>

                <van-cell-group inset>
                    <van-field label="用户机类型">
                        <template #input>
                            <van-radio-group v-model="state.machinetype" label="用户机类型" direction="horizontal" :disabled="editFlag">
                                <van-radio name="普通机" checked-color="#153744">普通机</van-radio>
                                <van-radio name="指挥机" checked-color="#153744">指挥机</van-radio>
                            </van-radio-group>
                        </template>
                    </van-field>
                </van-cell-group>

                <van-cell-group inset>
                    <van-field label="关注编号">
                        <template #input>
                            <van-dropdown-menu active-color="#153744" style="width: 100%">
                                <van-dropdown-item v-model="state.focus" :value="state.focus" :options="numOption"  :disabled="editFlag"/>
                            </van-dropdown-menu>
                        </template>
                    </van-field>
                </van-cell-group>

                <van-cell-group inset>
                    <van-field label="终端通信协议">
                        <template #input>
                            <van-radio-group v-model="protocol1" label="终端通信协议" direction="horizontal" :disabled="editFlag">
                                <van-radio name="二代协议" checked-color="#153744">二代协议</van-radio>
                                <van-radio name="三代协议" checked-color="#153744">三代协议</van-radio>
                            </van-radio-group>
                        </template>
                    </van-field>
                </van-cell-group>

                <van-cell-group inset>
                    <van-field label="终端类型协议">
                        <template #input>
                            <van-radio-group v-model="protocol2" label="终端类型协议" direction="horizontal" :disabled="editFlag">
                                <van-radio name="标准协议" checked-color="#153744">标准协议</van-radio>
                                <van-radio name="航空手持协议" checked-color="#153744">航空手持协议</van-radio>
                                <van-radio name="海军451E协议" checked-color="#153744">海军451E协议</van-radio>
                                <van-radio name="北斗数据链1.0协议" checked-color="#153744">北斗数据链1.0</van-radio>
                            </van-radio-group>
                        </template>
                    </van-field>
                </van-cell-group>

                <van-cell-group inset>
                    <van-field v-model="state.note" label="设置备注" clickable placeholder="设置备注" clearable :disabled="editFlag"/>
                </van-cell-group> -->

                <div style="margin: 16px;">
                    <van-button round block class="btn_grey"  v-show="!editFlag" @click="onSubmit">提交</van-button>
                    <van-button round block class="btn_white"  v-show="!editFlag" @click="cancelEdit">取消编辑</van-button>

                    <van-button round block class="btn_grey"  v-show="editFlag" @click="toChat">聊天</van-button>
                    <van-button round block type="warning"  v-show="editFlag" @click="deleteFriend">删除</van-button>
                </div>
            </van-form>
        </div>
    </div>
</template>
<script>
    import {Toast} from 'vant'
    export default {
        data() {
            return {
                editFlag:true,
                ee:'',
                routeInfo:'',
                routeId:'',
                state: {
                    name: "",
                    id: "",
                    unit:"",
                    duty:"班长",
                    platformtype:"单兵",
                    machinetype:'普通机',
                    focus:'无',
                    protocol:"",
                    note:''
                },
                protocol1:'二代协议',
                protocol2:'标准协议',
                dutyOption:[
                    {text: '班长', value: '班长'},
                    {text: '排长', value: '排长'},
                ],
                platformOption:[
                    {text: '机载', value: '机载'},
                    {text: '弹载', value: '弹载'},
                    {text: '舰载', value: '舰载'},
                    {text: '车载', value: '车载'},
                    {text: '潜载', value: '潜载'},
                    {text: '单兵', value: '单兵'},
                ],
                numOption:[
                    { text: '无', value: '无' },
                    { text: '1', value: '1' },
                    { text: '2', value: '2'},
                    { text: '3', value: '3'},
                    { text: '4', value: '4'},
                    { text: '5', value: '5'},
                    { text: '6', value: '6'}
                ],
            };
        },
        methods: {
            getDtfromRoute() {
                console.log(this.$route)
                this.chatObj = JSON.parse(this.$route.query.data)
                if (this.$route.query!==null) {
                    this.routeInfo =  this.chatObj;
                    this.routeId=this.$route.query.data.bdid||"";
                    this.state.id=this.routeInfo.bdid;
                    this.state.name=this.routeInfo.name;
                    this.state.unit=this.routeInfo.unit;
                    this.state.duty=this.routeInfo.duty;
                    this.state.platformtype=this.routeInfo.platformtype;
                    this.state.machinetype=this.routeInfo.machinetype;
                    this.state.focus=this.routeInfo.focus;
                    this.state.note=this.routeInfo.note;
                    // this.protocol1=this.routeInfo.protocol.substring(0, this.routeInfo.protocol.indexOf("-"));
                    // this.protocol2=this.routeInfo.protocol.substring(this.protocol1.length+1, this.routeInfo.protocol.length);

                }
            },
            onSubmit() {
                if(!this.state.name){
                    Toast.fail('请输入好友名');
                    return null
                }
                else if(!this.state.id || this.state.id.length !== 7){
                    Toast.fail('输入7位北斗卡号');
                    return null
                }
                this.editFriend();
            },
            editFriend() {
                // this.state.protocol=this.protocol1+'-'+this.protocol2;
                // this.ee=this.state;
                this.state.duty = "班长";
                this.state.platformtype = "单兵";
                this.state.machinetype = "普通机";
                this.state.focus="无";
                this.state.protocol = "二代协议-标准协议";
                this.state.note = "";
                console.log(this.state);
                let res = $App.updatePerson(JSON.stringify(this.state));
                this.editFlag=true;
                //this.$router.push("/address");
            },
            changeEditFlag(){
                this.editFlag=!this.editFlag;
            },
            cancelEdit(){
                this.editFlag=true;
            },
            backToAddress(){
                // this.$router.push("/address");
               this.$router.back()
            },
            deleteFriend(){
                let res = $App.delPersonById(this.routeId);
                console.log(res);
                // this.$router.push("/address");
                this.$router.push("/");
                //console.log(this.routeId);
            },
            toChat(){
                this.$router.push({
                    path: "/chatinfo",
                    query: {
                        id: this.routeId,
                        name:this.routeInfo.name
                    }
                });
            }
        },
        mounted() {
            this.getDtfromRoute();
        }
    };
</script>
<style scoped>

    .friendInfo {
        height: 100%;
        width: 100%;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }
    .friendInfo .header{
        /* background-color: #153744;
        color: #ffffff; */
        background-color: #03192b;
        color: white;
    }
    /deep/ .van-nav-bar .van-icon {
        /* color: #ffffff; */
        color: white;
    }
    /deep/ .van-nav-bar .van-nav-bar__title {
        /* color: #ffffff; */
        color: white;
    }
    /deep/ .van-radio--horizontal {
        margin: 5px 20px 5px 5px;
    }
    /deep/ .van-field__label{
        text-align: left;
        line-height: 30px;
    }
    /deep/ .van-dropdown-menu__bar{
        height: 30px;
    }
    .botbox {

        height:100%;
        display: flex;
        overflow-y: auto;
    }
    .btn_grey{
        background-color: #153744;
        color: #ffffff;
        /*border: #153744 1px solid;*/
        margin: 10px 0;
        /* color: black; */
        border: #153744 1px solid;
    }
    .btn_white{
        background-color:#ffffff ;
        color:  #153744;
        border: #153744 1px solid;
    }
</style>